<!-- 抽查记录 -->
<template>
  <BaseContainer>
    <aplid-base-crud ref="crud" class="w-100" v-bind="baseConfig">
      <template v-slot:videoPlay="{ row }">
				<el-button type="primary" link size="small" @click="handleShowPlay(row)">
					<el-icon class="mr8">
						<icon-video-one size="44" />
					</el-icon>
					查看监控
				</el-button>
			</template>
      <template v-slot:editDialog="{row,show}">
        <OperateForm v-if="show" :nowRowData="row" @refresh="handleRefresh"></OperateForm>
      </template>
      <template v-slot:detailDialog="{row,show}">
        <OperateForm v-if="show" :nowRowData="row" @refresh="handleRefresh" :detail="true"></OperateForm>
      </template>
    </aplid-base-crud>

    <el-dialog v-model="visible" title="监控播放" width="60%">
			<VideoPlay
        v-if="visible"
				:src="nowRowData.videoUri"
				:poster="nowRowData.posterImg"
				height="400px"
				style="width: 100%; height: 400px; border-radius: 10px"
			></VideoPlay>
		</el-dialog>

  </BaseContainer>
</template>

<script setup>
import {baseConfig} from './config'
import OperateForm from './OperateForm/index.vue'
import VideoPlay from '@/views/aplid/DetailPage/ContentListItem/FileList/videoPlay/index.vue'

const crud = ref(null)
const visible = ref(false)
const nowRowData = ref({})

const handleRefresh = () => {
  nextTick(() => {
    crud.value?.refreshChange()
  })
}

const handleShowPlay = (row) => {
	nowRowData.value = row
	visible.value = true
}
</script>

<style lang="scss" scoped></style>
